<template>
    <div class="login-wrapper">
        <div class="login-headimg-wrapper">
          <img src="@/assets/head_img191_189.png"/>
        </div>
        <div class="login-input-wrapper">
            <div class="login-input-username">
                <div class="input-username-leftIcon">
                    <img src="@/assets/usernameIcon.png"/>
                </div>
                <div class="input-username">
                    <input type="text" placeholder="123456789"/>
                </div>
                <div class="input-username-rightIcon">
                    <img src="@/assets/usernameIcon_right.png"/>
                </div>
            </div>
            <div class="login-input-password">
                <div class="input-password-leftIcon">
                    <img src="@/assets/passwordIcon.png"/>
                </div>
                <div class="input-password">
                    <input type="password"/>
                </div>
            </div>
        </div>
        <div class="login-input-button">
            <button @click="loginHandle">登录</button>
        </div>
        <div class="login-footer">
            <div class="no-login">
                <a href="#">无法登录?</a>
            </div>
            <div class="registered">
                <a href="#">新用户</a>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  methods: {
    loginHandle () {
      this.$router.push({path: 'home'})
    }
  }
}
</script>

<style scoped lang="stylus">
@import '~common/stylus/border-1px'
  .login-wrapper
    height:100vh
    background-image:url('../../assets/login_bgimg.png')
    .login-headimg-wrapper
      height:11.157333rem
      text-align:center
      line-height:11.157333rem
      img
        width:4.074667rem
        height:4.032rem
        vertical-align:middle
    .login-input-wrapper
      height:4.394667rem
      margin-bottom:3.456rem
      .login-input-username,.login-input-password
        display:flex
        flex-direction:row
        align-items:center
        height:50%
        padding-left:.810667rem
        border-bottom-1px(#dbdbdb)
        background:white
      .login-input-username
        .input-username-leftIcon
          margin-right:.533333rem
          img
            width:1.557333rem
            height:1.472rem
            vertical-align:middle
        .input-username
          width:8.896rem
          input
            width:100%
            border:none
            background:none
            outline:none
        .input-username-rightIcon
          position:absolute
          right:.64rem
          img
            width:.853333rem
            height:.512rem
      .login-input-password
        .input-password-leftIcon
          margin-right:.533333rem
          img
            width:1.557333rem
            height:1.642667rem
            vertical-align:middle
        .input-password
          width:8.896rem
          input
            width:100%
            border:none
            background:none
            outline:none
    .login-input-button
      text-align:center
      button
        width:14.72rem
        height:2.261333rem
        border:none
        border-radius:5px
        background:#f51919
        color:white
        text-align:center
    .login-footer
      width:100%
      padding:0 .704rem
      position:fixed
      bottom:1.066667rem
      box-sizing:border-box
      font-size:.682667rem
      .no-login
        float:left
        a
          color:#7e7772
      .registered
        float:right
        a
          color:#7e7772

</style>
